<template>
	<view>
		<text v-if="!waitCodeing" class="send" @click="sendCode">{{$t('c.msg-code.get')}}</text>
		<text v-else class="wait">{{waitCodeSeconds + $t('c.msg-code.wait')}}</text>
		<u-toast ref="toast"></u-toast>
	</view>
</template>

<script>
	export default {
		props: {
			phone: Number | String
		},
		data() {
			return {
				waitCodeing: false,
				waitCodeSeconds: 60
			}
		},
		methods: {
			sendCode() {
				if (!this.phone) {
					this.$refs.toast.show({
						message: this.$t('c.msg-code.phone-error')
					})
					return
				}
				if (this.waitCodeing) {
					return
				}
				this.waitCodeing = true
				const interval = setInterval(() => {
					if (--this.waitCodeSeconds == 0) {
						clearInterval(interval)
						this.waitCodeing = false
						this.waitCodeSeconds = 60
					}
				}, 1000)
			}
		}
	}
</script>

<style>
	.send {
		color: #033787;
	}
	
	.wait {
		color: #B9BFCB;
	}
</style>